 |
Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
 5o. módulo |
Desenvolvimento Web (DWEI5)¶
1. Document Object Model (DOM)¶
- Significa Document Object Model, Modelo de Objeto de Documento.
- Ele define a estrutura lógica dos documentos e a maneira como um documento é acessado e manipulado. A estrutura lógica que é muito parecida com uma árvore.
- Cada documento contém zero ou um nó do tipo doctype. Um nó do elemento raiz e zero ou mais comentários ou instruções de processamento; o elemento raiz serve como raiz da árvore de elementos do documento.
2. Box Model padrão do CSS¶
- O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML.
- O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.
- É uma propriedade que determina o tamanho final (altura e largura) dos elementos.
- E o box model tradicional da especificação tem uma regra bastante confusa:
- A propriedade element width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).
- Se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona utilizar:
#elemento { border: 10px solid #555; width: 50%; }
- O tamanho final do elemento terá 20px mais da metade do tamanho do pai.
- Surge então a propriedade box-sizing que considera o tamanho final do elemento, considerando o padding e border.
2.1. Propriedade box-sizing¶
- Por padrão todos os elementos possuem o valor do box-sizing: content-box.
Valores possíveis:
- border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
- content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
Observação:
- Os elementos em blocos, ocupam o máximo da largura e o mínimo de altura.
- Os elementos em linha, ocupam o espaço do conteúdo. Quando se usa valores em %, os cálculos das larguras e alturas dos elementos são feitos em relação aos elementos pais.
- As versões mais antigas do Firefox precisa do prefixo -moz- e, Chrome, Safari e Android, do -webkit-.
/* Valor padrão */
#elemento {
box-sizing: content-box;
}
#elemento {
box-sizing: border-box;
}
- Exemplos:
2.1.1 box-sizing: border-box;¶
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: border-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Saída:
Representação do CSS no Box Model de um elemento (class="item"):
- border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
- Uso do box-sizing: border-box; width: 250px; height: 100px;
- Neste exemplo, a largura final do elemento será de 250px.
2.1.2. box-sizing: content-box;¶
- Este é o padrão da propriedade.
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: content-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Saída:
Representação do CSS no Box Model de um elemento (class="item"):
- content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
- Uso do box-sizing: content-box; width: 250px; height: 100px;
- Neste exemplo, a largura final do elemento será 250px + 20px + 4px, totalizando 274px.
Resumo Comparativo¶
- A diferença é mínima ao visualizar as duas telas com os retângulos.
| 2.1.1 border-box | 2.1.2 content-box | |
|---|---|---|
| box-sizing: border-box; width: 250px; height: 100px; | box-sizing: content-box; width: 250px; height: 100px; | |
| Largura Final = 250px | Largura Final = 250px + 20px + 4px = 274px | |
|
|
|
|
|
3. Propriedades CSS de Layout¶
3.1. Propriedade Margin¶
- Para aprofundamento, consulte MDN Web Docs.
- Margin: É a distância a partir de cada um dos lados e de seus elementos vizinhos (ou às bordas do documento).
- Margin: aplica formatação do espaçamento do elemento em relação a seus adjacentes.
- Valores possíveis: em, pixels, %.
- Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
margin: top right bottom left;
}
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| margin: 10px; | margin: 10px 8px; | margin: 10px 8px 6px; | margin: 10px 8px 6px 12px; |
 |
 |
 |
 |
3.2. Propriedade Padding¶
- Para aprofundamento, consulte MDN Web Docs.
- Padding: É a distância do elemento entre a borda e o seu conteúdo.
- Padding: aplica formatação do espaçamento ao redor do elemento em relação a sua borda.
- Valores possíveis: em, pixels, %.
- Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
padding: top right bottom left;
}
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| padding: 10px; | padding: 10px 8px; | padding: 10px 8px 6px; | padding: 10px 8px 6px 12px; |
 |
 |
 |
 |
3.3. Propriedade Position (Atualmente está sendo pouco usado)¶
- Para aprofundamento, consulte MDN Web Docs.
- Ou ainda o artigo 5 Things You Might Not Know About the CSS Positioning Types.
- A propriedade Position indica ao navegador como ele tratará aquele elemento.
- Position: Aplica formatação à posição dos elementos.
- Valores possíveis:
- Static: por default, os elementos são static. Neste caso, não poderá definir a posição com left, right, top e bottom. Onde o elemento estiver ele ficará.
- Relative: mantém na posição do fluxo normal do documento. Permitido definir a posição utilizando: top, left, right e bottom. O elemento será posicionado aonde for designado, caso esteja sozinho. Caso contrário, será movido conforme valores atribuídos e demais elementos da página. O posicionamento é sempre feito em relação os demias elementos da página. E os valores negativos, movem os elementos para sentidos inversos.
- Absolute: leva o elemento para fora do fluxo normal do documento, deixando um espaço pra trás. Em um elemento definido desta forma, as coordenadas x, y são relativas a seu pai, posicio- nando em relação as bordas do elemento ou corpo, se não tiver elemento pai.
- Fixed: similar ao absoluto, porém, está travado na posição relativa ao viewport. Quando usa scroll, os elementos fixos não serão movidos com o resto do documento.
3.4. Propriedade Float (Atualmente está sendo pouco usado)¶
- Para aprofundamento, consulte MDN Web Docs.
Ou ainda o artigo CSS: Truques para dominar a propriedade Float.
O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Mediante o arquivo html abaixo, aplicaremos algumas modificações para exemplificar o uso do float.
- float: aplica a formatação no elemento de forma a mostrar como ele interage com os demais.
- Valores possíveis: left, right, none.
- Sintaxe:
#elemento {
float: left;
}
Para limpar o float, utiliza-se clear.¶
- clear: Limpa a formatação dos elementos que usaram float.
- Valores possíveis: right, left, both ou none.
<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
Saída:
- É exibido as duas divisões uma sobre a outra. Com larguras de 250px cada.
<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
/* Inclusão do FLOAT */
.menu {
float: left;
width: 30%;
}
.conteudo {
float: right;
width: 60%;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
Saída:
- Observação:
- É exibido as duas divisões uma ao lado da outra, porém, suas larguras foram modificadas para atender a condição de float, onde a classe menu passou a ter 30%, e a classe conteúdo 60%, totalizando 90% da largura total que é 600px.
- Caso ultrapasse a largura do elemento pai, o elemento é automaticamente levado para a linha abaixo. Ou na direira ou na esquerda, dependendo da configuração do float.
3.5. Propriedade Visibility¶
- Parta aprofundamento, consulte MDN Web DOCS.
- Ou ainda o artigo Visibility.
- Visibility: Pode ser usada para ocultar um elemento enquanto deixa o espaço onde ele teria sido criado. Também utilizado para ocultar linhas e colunas de uma tabela.
- Valores possíveis:
- visible: valor default, o elemento está sempre visível.
- hidden: esconde o elemento não modifica o layout. Os filhos serão visíveis se estiverem com o valor visible.
- collapse: as linhas ou colunas estão ocultas e o espaço que ocuparam é removido.
/* Código omitido para facilitar a visualização da modificação */
.menu {
float: left;
width: 30%;
visibility: hidden;
}
/* Código omitido para facilitar a visualização da modificação */
Saída:
- Neste caso, a classe menu, recebeu a propriedade visiility: hidden, o que fez ocultar a classe, porém permite a reserva do espaço, não sendo preeenchido com nada.
- Caso utilize o valor collapse, então seu espaço poderá ser preenchido.
3.6. Propriedade Outline¶
- Para aprofundamento consulte, MDN Web Docs.
- Ou ainda o artigo Outline.
- Outline: Aplica a formatação ao redor do elemento, externo às bordas.
- Valores possíveis: de cor, de estilo de linha e espessura.
- outline-color: valor;
- outline-style: valor;
- outline-width: valor; ou
- outline: outline-color outline-style outline-width;
Exemplo:
#elemento {
outline: rgba(0, 0,107,.65) solid 5px;
}
- Ainda utilizando o exemplo anterior original sem a propriedade visibility, e modificando somente as classes:
/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
Saída:
3.7. Propriedade Display¶
- Para aprofundamento, consulte MDN Web Docs.
- Display: Aplica a formatação de quebra antes ou depois, conforme os valores da propriedade.
- Valores possíveis:
- inline: elementos exibidos em linha (valor default). Por exemplo: as tags strong, a, em.
- block: é inserida uma quebra de linha antes e depois do elemento. Por exemplo: as tags h1, h2, p. São exibidos em blocos.
- none: não exibe o elemento com efeitos avançados. Se utilizar a propriedade visibility: hidden; você esta indicando ao browser para esconder o elemento.
- inline-block: área como bloco, e itens dentro como linha.
- list-item: igual a li.
- flex: cada conteúdo filho se comporta como se fosse um bloco.
4. Propriedades CSS de Layout - Display com o valor Flex¶
FlexBox¶
- Para aprofundamento do assunto, consulte MDN Web Docs.
- Leia também o Guia do Flexbox, CSS-Tricks.
<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Exemplo estilo.css */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
4.1. Display: Flex¶
- display: flex; : Indica que o conteúdo dentro de um container se comportará como um bloco, um container.
- Exemplo:
- No arquivo estilo.css:
- Inserir a propriedade display: flex no identificador #content.
- Na Figura a seguir, é exibido como é visualizado no navegador.
- No arquivo estilo.css:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
4.2. Flex-direction¶
- flex-direction: formata a direção do posicionamento dos elementos.
- Valores possíveis:
- row: exibe os itens na direção de linha, da esquerda pra direita. (valor default).
- column: exibe os itens na direção de coluna de cima pra baixo.
- row-reverse: exibe os itens na direção de linha, da direita pra esquerda.
- column-reverse: exibe os itens na direção de coluna de baixo pra cima.
- Exemplo:
- No arquivo estilo.css:
- Inserir a propriedade flex-direction: row no identificador #content.
- E em seguida, altere para os demais valores para verificar como será visualizado no navegador.
- No arquivo estilo.css:
flex-direction : row;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
flex-direction : column;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
flexdirection: row-reverse;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
flexdirection: column-reverse;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
4.3. Flex-wrap¶
- flex-wrap: determina se os elementos filhos aceitarão ou não uma quebra de conteúdo.
- Valores possíveis:
- wrap: permitem a quebra de conteúdo filhos.
- nowrap: não permitem a quebra de conteúdo filhos (valor default).
- wrap-reverse: efetuam a quebra de conteúdo filhos e são exibidos de forma inversa (de baixo para cima).
- Ou usar:
#elemento {
flex-flow: flex-direction flex-wrap;
}
Exemplo1¶
- No arquivo css:
- Inserir a propriedade flex-wrap: nowrap no identificador #content.
- Nesta situação, a visualização será idêntica ao que foi apresentado com a propriedade flex-direction: row. Pois os itens filhos são ajustados dentro do espaço para não quebrarem.
flex-wrap: nowrap;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo2¶
- No arquivo css:
- Altere a propriedadede largura (width: 100px) na classe .item, para width: 250px.
- Os itens filhos são redimensionados para caberem dentro do espaço definido.
- Agora, altere a propriedade flex-wrap: nowrap no identificador #content para flex-wrap: wrap.
flex-wrap: wrap;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap; /* Modificado de nowrap para wrap */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
Exemplo3¶
- No arquivo css:
- Mantendo a propriedadede largura na classe .item, com width: 250px.
- E em seguida, altere a propriedade flex-wrap para os demais valores.
flex-wrap: wrap-reverse;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
Exemplo4:¶
- No arquivo css:
- Altere flex-direction: row para a propriedade flex-direction: column-reverse.
- E a propriedade flex-wrap: wrap-reverse.
flex-wrap: wrap-reverse;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: column-reverse;
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
4.4. Justify-content¶
- justify-content: determina o posicionamento dos elementos na página.
- Valores possíveis:
- flex-start: todos os elementos filhos são alinhados à esquerda, no topo (valor default).
- flex-end: todos os elementos filhos são alinhados à direita, sem inversão de ordem.
- space-around: os elementos filhos são distribuídos ao redor do elemento e de maneira uniforme dentro do espaço do container.
- space-between: os elementos filhos são distribuídos a partir do centro do container para as extremidades. Sem inserir margem na lateral.
- Ou usar:
#elemento {
justify-content: flex-start;
}
Exemplo1:¶
- No arquivo css:
- Altere a propriedadede largura (width: 250px) na classe .item, para width: 100px.
- Altere a propriedadede largura (width: 600px) no identificador #content, para width: 900px.
- E a propriedade flex-direction para row.
- E a propriedade flex-wrap para wrap.
- E acrescente a propriedade justify-content: flex-start.
justify-content: flex-start;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px; /* modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row; /* modificado para row */
flex-wrap: wrap; /* modificado para wrap */
justify-content: flex-start; /* inserido */
}
.item {
width: 100px; /* modificado de 250px para 100px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
Exemplo2:¶
- No arquivo css:
- Altere a propriedadede justify-content: flex-start para justify-content: flex-end.
justify-content: flex-end;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end; /* modificado de flex-start para flex-end */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo3:¶
- No arquivo css:
- Altere a propriedadede justify-content: flex-end para justify-content: space-around.
justify-content: space-around;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around; /* modificado de flex-end para space-around */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo4:¶
- No arquivo css:
- Altere a propriedadede justify-content: space-around para justify-content: space-between.
justify-content: space-between;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; /* modificado de space-around para space-between */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
4.5. Align-items¶
- align-items: determina o posicionamento vertical dos elementos na página.
- Valores possíveis:
- flex-start: exibe os elementos do container do topo para baixo, da esquerda para direita (valor default).
- flex-end: exibe os elementos do container de baixo pra cima, da esquerda para direita.
- center: centraliza todos os elementos.
- strech: exibe os elementos do topo para baixo, caso não tenha sido definido a altura dos elementos filhos do container, os mesmos são esticados até abaixo. Para visualizar, remova a propriedade height: 100px da classe .item.
- baseline: é um alinhamento sensível ao conteúdo.
- Ou usar:
#elemento {
align-items: flex-start;
}
Exemplo1:¶
- No arquivo css:
- Altere a propriedadede justify-content: space-between; no identificador #content, para justify-content: flex-start;.
- Retorne a largura do identificador #content de 900px para width: 600px.
- E acrescente a propriedade align-items: flex-start.
align-items: flex-start;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo2:¶
- No arquivo css:
- E altere a propriedade align-items: flex-start para align-items: flex-end;.
align-items: flex-end;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo3:¶
- No arquivo css:
- E altere a propriedade align-items: flex-end; para align-items: center;.
align-items: center;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
Exemplo4:¶
- No arquivo css:
- E altere a propriedade align-items: center; para align-items: strech;.
- Remova a altura (height: 100px) da classe .item.
align-items: strech;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: strech;
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
Exemplo5:¶
- No arquivo css:
- E altere a propriedade align-items: strech; para align-items: baseline;.
- Mantenha a remoção da altura (height: 100px) da classe .item.
align-items: baseline;¶
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
Existem outras propriedades, tal como align-content. Pesquise a respeito!¶
4.6. Order¶
- order: determina a ordem em que os elementos serão exibidos na página.
- Valores possíveis:
- valores inteiros.
- Definindo uma pseudo-classe para cada um dos itens filhos. Teremos:
.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Importante:
- Mantendo os valores padrões para as propriedades no identificador #content:
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
- Acrescente as pseudo-classes após a classe .item, o arquivo css ficará assim:
#content {
background-color: #2e86c1;
height: 600px;
width: 600px; /* modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
4.7. Flex-grow¶
- flex-grow: define a propriedade de crescer o elemento na página.
- Valores possíveis:
- O valor default é 0.
- Não é possível valores negativos.
- Se um item filho tiver o flex-grow: 2, ele ocupará duas vezes mais o espaço previsto para os outros elementos. E se o width dos elementos estiver definido, ele ocupará o espaço restante.
4.8. Flex-shrink¶
- flex-shrink: define a propriedade de encolher o elemento na página. Somente como informativo.
- Valores possíveis:
- Valores possíveis: valores inteiros.
- O valor default é 1.
- Não é possível valores negativos.
4.9. Flex-basis¶
- flex-basis: define o width dos elementos antes de distribuir o restante para o flex-grow.
- Valores possíveis:
- Valores possíveis: valor em pixel.
- O valor default é auto.
- Se definir 0, os elementos não serão redimensionados.
Exemplo1:¶
- No arquivo css:
- Na classe .item, definindo os valores default para as 3 propriedades e removendo width da classe .item**.
- Acrescente a definição das pseudo-classes acrescentando flex-grow:2; na primeira pseudo-classe.
- Teremos a classe .item da seguinte forma:
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: auto; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
Exemplo2:¶
- No arquivo css:
- Na classe .item, modifique o valor da propriedade flex-basis: auto; para flex-basis: 65px;, assim os elementos serão definidos nesta largura e o espaço restante é usado nos elementos que foram configurados com a propriedade flex-grow.
- Teremos a classe .item da seguinte forma:
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: 65px; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
- Os itens 03, 04 e 02 possuem 65px da largura, enquanto que o item 01 expandiu no restante do espaço, pois possui o valor de flex-grow definido.
Observação:
- Para fixar o conteúdo, acesse: Flexbox Playground.
5. CSS-Grid¶
Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.
De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".
Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.
- CSS-Tricks: Grade CSS: um layout, várias maneiras.
Referências¶
- Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
Perguntas¶
- Esclareça suas eventuais dúvidas durante as aulas.
- Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
- Ou pelo Fórum do componente curricular.
ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.
</div>
</div>